<template>
    <div class="m-register">
        <div class="header-wrapper">
            <div class="wrapper clearfix">
                <div class="logo">
                    <a href="/"></a>
                </div>
                <div class="login-block">
                    <span>已有美团账号？</span>
                    <a href="/login" class="login-link">登录</a>
                </div>
            </div>
        </div>
        <div class="reg-info">
            <el-row>
                <el-col :span="12">
                      <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-dynamic">
                          <el-form-item label="用户名" prop="username">
                              <el-input type="user" v-model="ruleForm.username" autocomplete="off"></el-input>
                          </el-form-item>
                          <el-form-item label="邮箱" prop="email">
                              <el-input v-model="ruleForm.email" autocomplete="off"></el-input>
                          </el-form-item>
                          <el-form-item label="验证码" prop="code">
                              <el-input v-model="ruleForm.code" maxlength="6"></el-input>
                              <el-button size="mini" round @click="sendCode">发送验证码</el-button>
                              <span class="code-status">{{statusMsg}}</span>
                          </el-form-item>
                          <el-form-item label="密码" prop="password">
                              <el-input type="password" v-model="ruleForm.password" autocomplete="off"></el-input>
                          </el-form-item>
                          <el-form-item label="确认密码" prop="checkPass">
                              <el-input type="password" v-model="ruleForm.checkPass" autocomplete="off"></el-input>
                          </el-form-item>
                          <el-form-item>
                              <el-button type="primary" class="submit" @click="submitForm()">同意以下协议并注册</el-button>
                              <div class="msg-error">{{error}}</div>
                          </el-form-item>
                          <el-form-item>
                              <a class="f1" href="http://www.meituan.com/about/terms" target="_blank">《美团网用户协议》</a>  
                          </el-form-item>
                  </el-form>
                </el-col>
            </el-row>
        </div>
    </div>
</template>

<script>
import cryptoJs from 'crypto-js'

export default{
    layout: 'logout',
    data(){
      return {
        statusMsg: '',
        error: '',
        nameCheck: '',
        emailCheck: '',
        ruleForm: {
            username: '',
            code: '',
            password: '',
            checkPass: ''
        },
        rules: {
            username:[{
                required: true,
                type: 'string',
                message: '请输入用户名',
                trigger: 'blur'    
            }],
            email:[{
                required: true,
                type: 'email',
                message: '请输入邮箱',
                trigger: 'blur'    
            }],
            code:[{
                required: true,
                message: '请输入验证码',
                trigger: 'blur'    
            }],
            password:[{
                required: true,
                message: '请输入密码',
                trigger: 'blur'    
            }],
            checkPass:[{
                required: true,
                message: '请再次输入密码',
                trigger: 'blur'    
            },{
                validator: (rule, value, callback) => {
                    if (value !== this.ruleForm.password){
                        callback(new Error('两次输入密码不一致'))
                    }else{
                        callback()
                    }
                },
                trigger: 'blur'
            }]
         }
      };
    },
    methods: {
      submitForm(){
        this.$refs.ruleForm.validate((valid) => {
            if(valid){
                this.$axios.post('http://127.0.0.1:8082/user/signup',{
                    username: this.ruleForm.username,
                    password: cryptoJs.MD5(this.ruleForm.password).toString(),
                    email: this.ruleForm.email,
                    code: this.ruleForm.code
                }).then((res) => {
                    if(res.status === 200 && res.data.code === 0){
                        this.error = '';
                        setTimeout(() => {
                            window.location.href = '/login';
                        },1000)
                    }else{
                        this.error = res.data.msg;
                    }
                })
            }else{
                this.error = '请认真填写以上选项再提交注册';
            }
        });
      },
      sendCode(){
          this.$refs.ruleForm.validateField('username' , (valid) => {
              this.nameCheck = valid;
          });
          this.$refs.ruleForm.validateField('email' , (valid) => {
              this.emaliCheck = valid;
          });
          if(!this.nameCheck && !this.emaliCheck){
              this.$axios.post('http://127.0.0.1:8082/user/checkCode' , {
                  username: this.ruleForm.username,
                  email: this.ruleForm.email
              }).then((res) => {
                  if(res.status === 200 && res.data.code === 0){
                      let sec = 60;
                      let timer = setInterval(() => {
                          this.statusMsg = `验证码已发送，剩余${sec--}秒后可重新获取`;
                          if(sec < 0){
                              this.statusMsg = '';
                              clearInterval(timer);
                          }
                      },1000)  
                  }else{
                      this.error = '网络超时，请稍后再试';
                  }
              }).catch((err) => {
                  this.error = '网络故障，正在紧急处理之中...';
              }) 
          }
      }
   }
}
</script>

<style lang="less">
    @import '../assets/less/register/register.less';
</style>